<template>
    <div class="footer">
            <div class="tab_item" v-for="(item ,index) in tabBarImg" :key="index" @click="switchToTab(item.path)">
                <img :src="$route.path === item.path ? item.icon : item.normal" >
                <span :class="$route.path === item.path ? 'active' : ''">{{item.title}}</span>
            </div>
    </div>
</template>
<script>
export default {
    name: "tabbar",
    data(){
        return{
            tabBarImg:[
                {
                    path:'/app',
                    normal:require('./../../../assets/img/dindex.png'),
                    icon:require('./../../../assets/img/index.png'),
                    title:'首页'
                },
                {
                    path:'/all',
                    normal:require('./../../../assets/img/dall.png'),
                    icon:require('./../../../assets/img/all.png'),
                    title:'全部'
                },
                {
                    path:'/cart',
                    normal:require('./../../../assets/img/dcart.png'),
                    icon:require('./../../../assets/img/cart.png'),
                    title:'购物车'
                },
                {
                    path:'/me',
                    normal:require('./../../../assets/img/dme.png'),
                    icon:require('./../../../assets/img/me.png'),
                    title:'我'
                }
            ]
        }
    },
    methods:{
        switchToTab(path){
            this.$router.replace(path);
        }
    }
}
</script>
<style lang="less" scoped>
    .footer{
           width: 100%;
           height: 150px;
           background: #ffffff;
           position: fixed;
           bottom: 0;
           left: 0;
           display: flex;
           justify-content: space-around;
           align-items: center;
           border-top: 0.5px solid black;
           div{
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               .active{
                color: red;
               }
           }
       }
</style>